<template>
  <div>
     <Goods :arr="list">
    <template v-slot:num1>
        <th>#</th>
          <th>商品名称</th>
          <th>价格</th>
          <th>标签</th>
          <th>操作</th>
    </template>
    <template #num2="sco">
        <td>{{sco.row.id}}</td>
          <td>{{sco.row.goods_name}}</td>
          <td>{{sco.row.goods_price}}</td>
          <td>
        <!-- <span v-for="(itms,index) in sco.row.tags" :key="index" class="badge  badge-warning">啊实打实</span> -->
        <button class="btn btn-danger btn-sm" v-if="!sco.row.inputVisible" @click="sco.row.inputVisible = true">Tap</button>
         <input type="text" style="width: 35px;" v-else v-focus @blur="sco.row.inputVisible = false"
         v-model="sco.row.inputValue"
         @keydown.enter="but(sco.row)"
         > 
         <span v-for="(itms,ind) in sco.row.tags" :key="ind" class="badge badge-warning redd">{{itms}}</span>
   </td>
          <td><button class="btn btn-danger btn-sm" @click="btn(sco.row.id)">删除</button></td>
    </template>
    </Goods>
   </div>
</template>
 
<script>
    import Goods from '../assets/MyTable.vue'
    import axios from "axios";
axios.defaults.baseURL = "https://www.escook.cn";
export default {
    created() {
    axios({
      url: "/api/goods",
    }).then((res) => {
        console.log(res)
      this.list = res.data.data;
    });
  },
  name: "",
  components: {
    Goods
  },
  props: {},
  data() {
    return {
        list:[],
       
    };
  },
  computed: {},
  watch: {},
  methods: {
    btn(a){
       this.list =  this.list.filter(itms =>itms.id !== a )
    },
    but(a){
        if(a.inputValue.trim().length ===0) {
            a.inputValue = ''
            return alert('没有数据')
        }
        a.tags.push(a.inputValue)
        a.inputValue = ''
    }
  }
};
</script>

<style scoped>
     .redd{
        color: pink;
     }
</style>